﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}

<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
<script src="~/lib/layui/layui.js"></script>
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.9.20/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    @* 设置背景颜色为灰色 *@
    <div class="layui-bg-gray" style="padding:16px 100px 16px 100px;">
        @* layui-panel 创建一个面板样式的容器 *@
        <div class="layui-panel" style="width:100%;">
            @* layui-card 创建一个卡片样式的容器*@
            @* 你可以根据需要调整这里的宽度和高度 *@
            <div class="layui-card">
                @* 标题 *@
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <i class="layui-icon layui-icon-left" style="color: #dcccc0"></i><a style="color: #e2e2e2;cursor:pointer" href="/Supplier/SupplierInfo">返回&nbsp;&nbsp;</a><span style="color: #000">|</span>&nbsp;&nbsp;供应商基本信息&nbsp;<span style="color: #000"><i class="layui-icon layui-icon-note"></i></span>
                    </h3>
                    @* 墨绿分割线 *@
                    <hr class="layui-border-green">
                </div>
                @* 主体 *@
                <div class="layui-card-body">
                    <div style="margin-top:20px;">
                        <form class="layui-form layui-row layui-col-space16" lay-filter="demo-val-filter" action="">
                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商编码</label>
                                    <div class="layui-input-block">
                                        <input type="text" id="coding" name="supplierCoding" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商名称</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="supplierName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商区分</label>
                                    <div class="layui-input-block">
                                        <select name="supplierDiff">
                                            <option value="公司">公司</option>
                                            <option value="个人">个人</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商电话</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="supplierPhone" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md10">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商地址</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="supplierAddress" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">所在国家</label>
                                    <div class="layui-input-block">
                                        <select id="country" name="countryId" lay-filter="selectcountry">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">所在城市</label>
                                    <div class="layui-input-block">
                                        <select id="city" name="cityId">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商分类</label>
                                    <div class="layui-input-block">
                                        <select id="classification" name="classificationId">
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">供应商标签</label>
                                    <div class="layui-input-block">
                                        <input type="text" name="supplierLabel" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">本公司标识</label>
                                    <div class="layui-input-block">
                                        <select name="companyLogo">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">委外标识</label>
                                    <div class="layui-input-block">
                                        <select name="identification">
                                            <option value="1">是</option>
                                            <option value="2">否</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="margin-bottom: 10px;">
                                    <label class="layui-form-label">状态</label>
                                    <div class="layui-input-block">
                                        <select name="supplierStatus">
                                            <option value="1">有效</option>
                                            <option value="2">无效</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="layui-col-md5">
                                <div class="layui-form-item" style="float:right;margin-top: 60px;">
                                    <div class="layui-input-block">
                                        <button type="submit" class="layui-btn layui-icon layui-icon-add-1" lay-submit lay-filter="demo-val">保存</button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 供应商其他信息 -->
        <div class="layui-panel" style="width:100%;">
            <div class="layui-card">
                <!-- 标题 -->
                <div class="layui-card-header">
                    <h3 style="color: #34c38f">
                        <span style="color:#1e9fff;">供应商其他信息</span>
                    </h3>
                    <!-- 蓝色分割线 -->
                    <hr class="layui-border-blue">
                </div>
                <!--主体-->
                <div class="layui-card-body">
                    <div class="layui-tab" lay-filter="test-hash">
                        <ul class="layui-tab-title">
                            <li class="layui-this" lay-id="1">营业执照</li>
                            <li lay-id="2">联系人</li>
                            <li lay-id="3">银行信息</li>
                        </ul>
                        <div class="layui-tab-content">
                            <!--营业执照-->
                            <div class="layui-tab-item layui-show">
                                <div style="margin-top:20px;width:90%">
                                    <form class="layui-form layui-row layui-col-space16" lay-filter="demo-val-filter" action="">
                                        <div class="layui-form-item">
                                            <label class="layui-form-label">营业执照号:</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>



                                        <div class="layui-form-item">
                                            <label class="layui-form-label">法人代表:</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>


                                        <div class="layui-form-item">
                                            <label class="layui-form-label">公司类型:</label>
                                            <div class="layui-input-block">
                                                <select name="">
                                                    <option value="公司">公司</option>
                                                    <option value="个人">个人</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label">经营范围:</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="" lay-verify="required|phone" placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label">成立日期:</label>
                                            <div class="layui-input-block">
                                                <input type="text" name="" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
                                            </div>
                                        </div>

                                        <div class="layui-form-item">
                                            <label class="layui-form-label">状态</label>
                                            <div class="layui-input-block">
                                                <select name="">
                                                    <option value="1">有效</option>
                                                    <option value="2">无效</option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="layui-form-item" style="text-align:right">
                                            <div class="layui-input-block">
                                                <button type="submit" class="layui-btn layui-bg-blue layui-icon layui-icon-add-1" lay-submit lay-filter="business-val">保存</button>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!--联系人-->
                            <div class="layui-tab-item">
                                <table class="layui-table">
                                    <thead style="background-color:">
                                        <tr>
                                            <th>序号</th>
                                            <th>联系人</th>
                                            <th>联系电话</th>
                                            <th>联系人岗位</th>
                                            <th>创建时间</th>
                                            <th>创建人</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                <div id="demo-phone-all"></div>
                            </div>
                            <!--银行信息-->
                            <div class="layui-tab-item">
                                <table class="layui-table">
                                    <thead>
                                        <tr>
                                            <th>序号</th>
                                            <th>银行编码</th>
                                            <th>分行编码</th>
                                            <th>银行账户</th>
                                            <th>创建时间</th>
                                            <th>创建人</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                </table>
                                <div id="demo-bank-all"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script>
        // 使用layui的layer模块
        layui.use(['form', 'layer'], function () {
            var $ = layui.$;
            var form = layui.form;
            var table = layui.table;
            var laypage = layui.laypage;

            //获取分页数据
            var pageIndex = 1;
            var pageSize = 3;

            //给供应商编码赋值
            $('#coding').val("VENDOR-1")

            //获取国家
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/Suppliers/SearchCountry",
                type: 'GET',
                dataType: 'json',
                success: res => {
                    console.log(res)
                    var options = '<option value="0">请选择</option>';
                    $.each(res.data, function (index, item) {
                        options += '<option value="' + item.countryId + '">' + item.countryName + '</option>';
                    });
                    $('#country').html(options);
                    form.render('select'); // 更新下拉框渲染
                }
            });

            //获取国家下拉框值
            form.on('select(selectcountry)', function (data) {
                console.log(data.value)
                AcquisitionCity();
            });

            //获取城市
            function AcquisitionCity() {
                var obj = {
                    CountryId: $('#country').val(),
                }
                $.ajax({
                    url: '@ViewBag.RedDragonWrite' + "/api/Suppliers/SearchCity",
                    type: 'GET',
                    data: obj,
                    dataType: 'json',
                    success: res => {
                        console.log(res)
                        var options = '<option value="0">请选择</option>';
                        $.each(res.data, function (index, item) {
                            options += '<option value="' + item.cityId + '">' + item.cityName + '</option>';
                        });
                        $('#city').html(options);
                        form.render('select'); // 更新下拉框渲染
                    }
                });
            }

            //获取供应商分类
            $.ajax({
                url: '@ViewBag.RedDragonWrite' + "/api/Suppliers/SearchClassifications",
                type: 'GET',
                dataType: 'json',
                success: res => {
                    console.log(res)
                    var options = '<option value="0">请选择</option>';
                    $.each(res.data, function (index, item) {
                        options += '<option value="' + item.classIficationsId + '">' + item.classIficationsName + '</option>';
                    });
                    $('#classification').html(options);
                    form.render('select'); // 更新下拉框渲染
                }
            });

            // 提交事件
            form.on('submit(demo-val)', function (data) {
                var field = data.field; // 获取表单字段值
                field.createdOwner = localStorage.getItem('userName');
                field.isSupplier = 1;
                console.log(field) //在控制台显示值
                // 此处可执行 Ajax 等操作
                $.ajax({
                    type: "post",
                    url: '@ViewBag.RedDragonWrite' + "/api/Suppliers/CreateSupplier",
                    data: JSON.stringify(field),
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        // 处理响应，例如提示成功信息
                        layui.layer.msg(res.msg, { icon: 6, time: 1000 });
                    },
                    error: function (xhr, status, error) {
                        // 处理错误
                        layui.layer.msg('添加失败', { icon: 5, time: 1000 });
                    }
                })
                return false; // 阻止默认 form 跳转
            });
        });
    </script>
</body>
</html>
